<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Forms:  Text Cycler</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="description" CONTENT="Use the Up and Down arrows while in the text box to cycle through your choices.  InternetExplorer users can go up and down through the list, Netscape users can only go down through the list.  Neat!">
<META NAME="date" CONTENT="2000-12-19">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="James Gough">
<META NAME="section" CONTENT="Forms">
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  James Gough (wheresjim@hotmail.com) -->
<!-- Web Site:  http://www.esprinkles.com -->




<!-- Begin
var listOpt = new Array("", "Check", "out", "cool", "javascripts", "at", "javascriptsource.com");
var Ex = false;
var Net = false;
var app = navigator.appName.substring(0,1);
if (app == 'N') Net = true; 
else Ex = true;
document.onkeyup = keyUp;
if (Net) document.captureEvents(Event.KEYUP);
function keyUp(ev) {
if (Net) { 
var source = ev.target.name;
if(source) {
if(ev.which == 0 && source == "target_box") cycleUp(source);
   }
}
else if (Ex) {
var source = window.event.srcElement.name;
if(source) {
if(window.event.keyCode == 40 && source  == "target_box") cycleUp(source);
if(window.event.keyCode == 38 && source  == "target_box") cycleDown(source);
      }
   }
}
var arrayIndex = 0;
function cycleUp(source) {
arrayIndex++;
if(arrayIndex > listOpt.length-1) arrayIndex = 0;
var change_box = eval("document.cycleForm." + source);
change_box.value = listOpt[arrayIndex];
}
function cycleDown(source) {
arrayIndex--;
if(arrayIndex < 0) arrayIndex = listOpt.length - 1;
var change_box = eval("document.cycleForm." + source);
change_box.value = listOpt[arrayIndex];
}
//  End -->
</script>

</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

<BR>
<center>
<table width=600 cellpadding=0 cellspacing=10>
<tr>
<td width=468 align=center>

    
    
</td>
<td width=120 align=center>
    
</td>
</tr>
</table>
<BR>
<BR>
<basefont size=3>
<FONT SIZE="+2" FACE="Helvetica,Arial">
<A HREF="../index.htm" /" TARGET="_top"><FONT COLOR="#0000FF"><b>Home</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<A HREF="index.htm" /forms/" ><font color="#FF0000"><b>Forms</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<FONT COLOR="#006666"><b>Text Cycler</b></font></font>
<BR>
<BR>
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE="helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->
Use the Up and Down arrows while in the text box to cycle through your choices.  InternetExplorer users can go up and down through the list, Netscape users can only go down through the list.  Neat!
<hr>
</td></tr>
</table>
<!-- Demonstration -->
<center>
<form name="cycleForm">
<input name="target_box" value="" size="25"><br>
</form>
</center>
<P>
<P>
<a name="source">
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Forms:  Text Cycler</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s).  The script is yours!!!
<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  1.97 KB" size=24>
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- TWO STEPS TO INSTALL TEXT CYCLER:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  --&gt;

&lt;!-- STEP ONE: Paste this code into the HEAD of your HTML document  --&gt;

&lt;HEAD&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Original:  James Gough (wheresjim@hotmail.com) --&gt;
&lt;!-- Web Site:  http://www.esprinkles.com --&gt;

&lt;! &gt;
&lt;! &gt;

&lt;!-- Begin
var listOpt = new Array("", "Check", "out", "cool", "javascripts", "at", "javascriptsource.com");
var Ex = false;
var Net = false;
var app = navigator.appName.substring(0,1);
if (app == 'N') Net = true; 
else Ex = true;
document.onkeyup = keyUp;
if (Net) document.captureEvents(Event.KEYUP);
function keyUp(ev) {
if (Net) { 
var source = ev.target.name;
if(source) {
if(ev.which == 0 && source == "target_box") cycleUp(source);
   }
}
else if (Ex) {
var source = window.event.srcElement.name;
if(source) {
if(window.event.keyCode == 40 && source  == "target_box") cycleUp(source);
if(window.event.keyCode == 38 && source  == "target_box") cycleDown(source);
      }
   }
}
var arrayIndex = 0;
function cycleUp(source) {
arrayIndex++;
if(arrayIndex &gt; listOpt.length-1) arrayIndex = 0;
var change_box = eval("document.cycleForm." + source);
change_box.value = listOpt[arrayIndex];
}
function cycleDown(source) {
arrayIndex--;
if(arrayIndex &lt; 0) arrayIndex = listOpt.length - 1;
var change_box = eval("document.cycleForm." + source);
change_box.value = listOpt[arrayIndex];
}
//  End --&gt;
&lt;/script&gt;

&lt;/HEAD&gt;

&lt;!-- STEP TWO: Copy this code into the BODY of your HTML document  --&gt;

&lt;BODY&gt;

&lt;center&gt;
&lt;form name="cycleForm"&gt;
&lt;input name="target_box" value="" size="25"&gt;&lt;br&gt;
&lt;/form&gt;
&lt;/center&gt;

 

&lt;!-- Script Size:  1.97 KB --&gt;</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>
